<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src='./js/vue.js'></script>
    <style>
        .main-box {
            margin-top: 30px;
        }

        .main-box>div {
            border: 1px solid hotpink;
        }

        .show {
            display: flex;
        }
    </style>
</head>

<body>
    <div id='root'>
        <templ @isshape="isshape" @isbig='isBig' @addvalue="addvalue" @passvalue="passvalue"></templ>
        <div :class="['main-box',{'show':shapeType}]">
            <div v-for='(item,index) in searValue()' :key='index'>
                {{item.title}}
            </div>
        </div>
    </div>
    <template id="templ">
        <div>
            <button @click="isShape=true">竖</button>
            <button @click="isShape=false">横</button>
            <button @click="isBig=true">大</button>
            <button @click="isBig=false">小</button>
            <input type="text" v-model="inputValue">
            <button @click="addValue">添加</button>
        </div>
    </template>
    <script>
        Vue.component("templ", {
            template: "#templ",
            data() {
                return {
                    isShape: true, //为true时是竖,相反
                    isBig: true, //true 为大
                    inputValue: "",//输入框的值
                }
            },
            watch: {
                // 向父组件传递一个值
                //         
                isShape(newValue, oldValue) {
                    this.$emit("isshape", newValue)
                },
                // isBig监听
                // 第一个参数为最新的值,第二个参数为改变之前的值
                isBig(new1, old) {
                    this.$emit("isbig", this.isBig)
                },
                // 监听输入框的值并传递向父组件传递
                inputValue() {
                    this.$emit("passvalue", this.inputValue)
                }
            },
            methods: {
                addValue() {
                    // 点击添加按钮向父组件传输入框的值
                    this.$emit("addvalue", this.inputValue)
                }

            }
        })
        let vue = new Vue({
            // 选择控制区域,通过选择器去选到他，工作中一般使用id选择器;
            el: '#root',
            // 数据储存位置
            data: {
                list: [{ title: 'text1', id: 1 }, { title: 'text2', id: 2 }, { title: 'text3', id: 3 },
                { title: 'text4', id: 4 }, { title: 'text5', id: 5 }],
                shapeType: true,
                keywords: "" //用来替换子组件传过来的输入框的值
            },
            // 方法的储存位置
            methods: {
                isshape(data) {
                    this.shapeType = data
                    console.log(this.shapeType)
                },
                // 接收子组件isBig值
                isBig(data) {
                    if (data) {
                        // 数组方法(改变顺序并返回一个数组),定义两个参数 第一个参数为第一个值,第二个参数为第二值,可以进行差值匀速,如果第二个值-第一个值>0 
                        // 第二个值的顺序发生改变,去到第一位,
                        this.list = this.list.sort((a, b) => b.id - a.id)
                        // this.list.reverse();
                        // reverse 翻转数组. 
                    } else {
                        this.list = this.list.sort((a, b) => a.id - b.id)
                    }
                },
                // 点击添加按钮子组件向父组件传过来的输入框的值
                addvalue(data) {
                    // 利用vue数据改变视图的改变. 
                    this.list.push({ title: data, id: this.list.length + 1 })
                    localStorage.list123 = JSON.stringify(this.list)
                },
                // 用来传递数据的.
                passvalue(data) {
                    this.keywords = data;
                },
                // 父组件自己的函数, 用来过滤list,通过输入框值,并且返回一个数组. 
                searValue() {
                    return this.list.filter(item => item.title.includes(this.keywords))
                }

            },
            created() {
                // 如果本地缓存有数据,进行添加 没数据不进行操作. 
                if (localStorage.list123) {
                    this.list = JSON.parse(localStorage.list123)
                }
            }
        })
    </script>
</body>

</html>